<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="1100px" append-to-body>
        <el-form ref="form" :model="model" :rules="rules" inline label-width="100px" label-suffix=":" class="prod-form-class">
            <el-form-item label="产品名称" prop="product_name">
                <el-input v-model.trim="model.product_name" placeholder="请输入产品名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="产品spu" prop="spu">
                <el-input v-model.trim="model.spu" placeholder="请输入产品spu" clearable></el-input>
            </el-form-item>
            <el-form-item label="安全库存" prop="safe_quantity">
                <el-input-number v-model.trim="model.safe_quantity" :controls="false" :min="0" :step="1" placeholder="请输入安全库存" clearable></el-input-number>
            </el-form-item>
            <el-form-item label="在途库存" prop="on_way_quantity">
                <el-input-number v-model.trim="model.on_way_quantity" :controls="false" :min="0" :step="1" placeholder="请输入在途库存" clearable></el-input-number>
            </el-form-item>
            <el-form-item label="未发数量" prop="not_send_quantity">
                <el-input-number v-model.trim="model.not_send_quantity" :controls="false" :min="0" :step="1" placeholder="请输入未发数量" clearable></el-input-number>
            </el-form-item>
            <el-form-item label="占用库存" prop="using_quantity">
                <el-input-number v-model.trim="model.using_quantity" :controls="false" :min="0" :step="1" placeholder="请输入占用库存" clearable></el-input-number>
            </el-form-item>
            <el-form-item label="可用库存" prop="inventory_quantity">
                <el-input-number v-model.trim="model.inventory_quantity" :controls="false" :min="0" :step="1" placeholder="请输入可用库存" clearable></el-input-number>
            </el-form-item>
            <el-form-item label="总库存" prop="all_inventory_quantity">
                <el-input-number v-model.trim="model.all_inventory_quantity" :controls="false" :min="0" :step="1" placeholder="请输入总库存" clearable></el-input-number>
            </el-form-item>

            <!-- <el-form-item label="仓库" prop="warehouse">
                 <el-select v-model="model.warehouse" placeholder="请选择仓库" clearable>
                    <el-option v-for="item in dict.warehouseList" :key="item.id" :label="item.name" :value="item.name"></el-option>
                </el-select>
            </el-form-item> -->
            <!-- <el-form-item label="货架位" prop="warehouse_position" v-if="!isEdit">
                <el-input v-model="model.warehouse_position" clearable></el-input>
            </el-form-item>
            <el-form-item label="创建时间" prop="create_time">
                <el-date-picker v-model="model.create_time" type="date" placeholder="请选择创建时间" clearable> </el-date-picker>
            </el-form-item>
            <el-form-item label="更新时间" prop="update_time">
                <el-date-picker v-model="model.update_time" type="date" placeholder="请选择更新时间" clearable> </el-date-picker>
            </el-form-item> -->
            <el-form-item label="图片" prop="product_images" class="full">
                <ImageUploadMultiple v-model="model.product_images" :limit="1" :multiple="false"></ImageUploadMultiple>
            </el-form-item>
        </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" :loading="save" :disabled="save" @click="submit">确认</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
    </el-dialog>
</template>

<script>
import { detailedDetail, detailedAdd, detailedEdit, getWarehouseList } from '@/api/warehouse'

export default {
    name: 'DetailedDetailDialog',
    components: {},
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            loading: false,
            save: false,
            model: {
                id: undefined,
                warehouse: undefined,
                warehouse_position: undefined,
                create_time: undefined,
                update_time: undefined,
            },
            rules: {},
            dict: {
                warehouseList: []
            }
        }
    },
    computed: {
        title() {
            return `${this.isEdit?'编辑':'新增'}仓库清单`
        },
        isEdit() {
            return !!this.params.id
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    watch: {
        params: {
            handler(val) {
                if (val.id) {
                    this.getDetail()
                }
            },
            immediate: true,
            deep: true,
        },
    },
    async mounted() {
        this.loading = true
        try {
            const warehouseData = await getWarehouseList()
            this.dict.warehouseList = warehouseData?.data?.list ?? []
        } catch (error) {
            this.loading = false
        }
    },
    methods: {
        getDetail() {
            this.loading = true
            const params = { id: this.params.id }
            detailedDetail(params)
                .then(res => {
                    this.model = Object.assign({}, this.model, res.data)
                })
                .finally(() => {
                    this.loading = false
                })
        },
        submit() {
            this.$refs.form.validate(valid => {
                if (!valid) {
                    return
                }
                const params = { ...this.model }
                if (this.save) {
                    return
                }
                this.save = true
                if (this.isEdit) {
                    detailedEdit(params)
                        .then(res => {
                            this.$message.success(res.msg)
                            this.dialogVisible = false
                            this.$emit('success')
                        })
                        .finally(() => {
                            this.save = false
                        })
                } else {
                    detailedAdd(params)
                        .then(res => {
                            this.$message.success(res.msg)
                            this.dialogVisible = false
                            this.$emit('success')
                        })
                        .finally(() => {
                            this.save = false
                        })
                }
            })
        },
        cancel() {
            this.dialogVisible = false
        },
    },
}
</script>

<style>
.prod-form-class.el-form .el-form-item {
    width: 50%;
    margin-right: 0;
}
.prod-form-class.el-form .el-form-item .el-input {
    width: 250px;
}
.prod-form-class.el-form .el-form-item.w750 {
    width: 100%;
}
.prod-form-class.el-form .el-form-item.w750 .el-input {
    width: 770px;
}
.prod-form-class.el-form .el-form-item .el-textarea {
    width: 770px;
}
.prod-form-class.el-form .el-form-item.full {
    width: 100%;
}
.prod-form-class.el-form .el-form-item.full .el-input,
.prod-form-class.el-form .el-form-item.full .el-cascader {
    width: 770px;
}
.prod-form-class.el-form .el-form-item.w120 .el-input-number.w120 + .el-input-number {
    margin-left: 10px;
}
.prod-form-class.el-form .el-form-item .el-input-number,
.prod-form-class.el-form .el-form-item .el-input-number .el-input {
    width: 250px;
}
.prod-form-class.el-form .el-form-item.w120 .el-input-number.w120,
.prod-form-class.el-form .el-form-item.w120 .el-input-number.w120 .el-input {
    width: 120px;
}
.prod-form-class.el-form .el-input-number.is-without-controls .el-input__inner {
    text-align: left;
}
.custom-select .el-select-dropdown__item {
    max-width: 450px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
